架构设计实操的方法论
"纸上得来终觉浅，绝知此事须躬行。"架构设计不能停留在理论层面，必须通过实际项目的操练来深化理解。本节以课程的小闭环项目（首页项目）为案例，演示如何从需求分析到架构设计的完整流程。
架构设计的起点：需求分析
绘制架构图的第一步是梳理项目需求。所有架构决策和技术选型都必须围绕需求展开。回顾需求分析的框架：
- 项目背景：为什么做这个项目，解决什么问题
- 项目目标：要达成什么效果，用户获得什么价值
- 项目限制：功能性和非功能性约束、质量要求、成本和时间限制
小闭环项目的业务分析
业务范围
小闭环项目是一个知识付费平台的首页，在整个课程体系中处于第一阶段（基础能力夯实阶段）。它要实现的是一个综合性的首页类项目，包含内容展示、搜索、用户交互等核心功能。
业务流程关键点
参考竞品（知乎、慕课网等知识付费平台）分析，首页项目的核心业务流程：
用户访问 → 首页内容展示 → 搜索/分类浏览 → 内容详情查看
↓
用户注册/登录 → 收藏/评论/购买
text
外部依赖
| 依赖类型 | 具体内容 |
|---|---|
| 服务端接口 | 首页数据API、搜索API、用户API |
| 数据库 | 用户数据、内容数据、分类数据 |
| 第三方服务 | 图片CDN、支付接口（可选） |
技术需求分析
| 维度 | 选型 | 理由 |
|---|---|---|
| 前端框架 | Vue 3 + Composition API | 主流方案，团队熟悉 |
| CSS方案 | Tailwind CSS / UnoCSS | 现代CSS框架，灵活可配置 |
| 构建工具 | Vite | 快速开发体验 |
| 状态管理 | Pinia | Vue 3官方推荐 |
| 路由 | Vue Router | 标准方案 |
| HTTP请求 | Axios | 功能完善，拦截器支持好 |
| 服务端 | Node.js + NestJS | TypeScript统一，对前端友好 |
| 数据库 | MySQL | 关系型数据，成熟稳定 |
| 缓存 | Redis | 热点数据缓存，提升性能 |
架构图绘制
系统架构总览
┌─────────────────────────────────────────┐
│ 客户端 │
│ PC浏览器 / 移动浏览器 / 管理后台 │
└──────────────┬──────────────────────────┘
│ HTTP/HTTPS
↓
┌─────────────────────────────────────────┐
│ Nginx 反向代理 │
│ 静态资源 + API路由转发 │
└──────────────┬──────────────────────────┘
│
┌───────┴───────┐
↓ ↓
┌──────────────┐ ┌──────────────┐
│ 前端静态资源 │ │ NestJS API │
│ (Vue 3 SPA) │ │ 服务层 │
└──────────────┘ └───────┬──────┘
│
┌────────┼────────┐
↓ ↓ ↓
┌───────┐ ┌──────┐ ┌───────┐
│ MySQL │ │Redis │ │ 文件 │
│ 数据库 │ │ 缓存 │ │ 存储 │
└───────┘ └──────┘ └───────┘
text
前端架构
src/
├── api/ # API请求封装
├── assets/ # 静态资源
├── components/ # 公共组件
├── composables/ # 组合式函数
├── layouts/ # 布局组件
├── pages/ # 页面组件
├── router/ # 路由配置
├── stores/ # Pinia状态管理
├── styles/ # 全局样式
├── types/ # TypeScript类型定义
└── utils/ # 工具函数
text
服务端架构
src/
├── modules/
│ ├── auth/ # 认证模块
│ ├── user/ # 用户模块
│ ├── content/ # 内容模块
│ └── search/ # 搜索模块
├── common/
│ ├── decorators/ # 自定义装饰器
│ ├── filters/ # 异常过滤器
│ ├── guards/ # 守卫
│ ├── interceptors/ # 拦截器
│ └── pipes/ # 管道
├── config/ # 配置
└── app.module.ts # 根模块
text
非功能性需求考量
| 维度 | 目标 | 实现方案 |
|---|---|---|
| 性能 | FCP < 1.5s, LCP < 2.5s | Vite构建优化 + CDN + 图片懒加载 |
| 安全 | HTTPS + JWT认证 | NestJS Guards + CORS配置 |
| 可维护性 | 代码规范 + 测试覆盖 | ESLint + Vitest + Husky |
| 可扩展性 | 模块化设计 | NestJS模块系统 + 前端组件化 |
从小闭环到完整项目
小闭环项目的架构设计是一个起点，它为后续的跨端扩展、服务端深化、工程化提升奠定了基础。理解了这个小项目的架构设计方法后，就可以用相同的思路去设计更复杂的系统——只是模块更多、依赖更复杂、需要考虑的维度更多。
↑